<template>
	<view class="popup-bg" @touchmove.native.stop.prevent v-show="show" @tap.stop="$emit('close')">
		<view class="popup-box" @tap.stop :class="[show ? 'gdIn' : 'gdOut']">
			<image class="close-btn img-40" :src="$staticPath('classify/close.png')" @tap.stop="$emit('close')"></image>
			<view class="sku-goods u-flex">
				<u-image mode="aspectFill" class="image u-m-r-30" width="176rpx" height="176rpx" :src="$fullLink(goodsImg)">
					<u-loading-icon slot="loading"></u-loading-icon>
				</u-image>
				<view>
					<view class="price c-red fw-600">{{$unitEn}}{{goodsInfo.price }}</view>
					<!-- <view class="stock c-80" v-show="`${checkInfo.stock}`">{{ $t('classify.剩余') }}{{ checkInfo.stock }}{{ $t('classify.件') }}</view> -->
				</view>
			</view>
			<view>
				<text>{{$t('yuncang.累计库存')}}:</text>
				<text>{{goodsInfo.totalStock}}</text>
			</view>
			<view class="sum-box u-flex u-flex-between">
				
				<view class="tlt">
					<text class="u-m-r-10">{{ $t('classify.请选择数量') }}</text>
					<text class="u-font-24 c-80" v-if="goodsInfo.maxNumber">({{ $t('classify.限购') + goodsInfo.maxNumber + $t('classify.件') }})</text>
				</view>
				<view class="sum-item u-flex">
					<image class="img-32 u-m-r-12" :src="$staticPath('classify/sub.png')" @tap="sub"></image>
					<view class="number text-center">
						<input type="number" v-model="qty" @input="handleNumberChange"/>
					<!-- {{ goodsNum }} -->
					</view>
					<image class="img-32 u-m-l-12" :src="$staticPath('classify/add.png')" @tap="add"></image>
				</view>
			</view>
			<view  class="m-t-114">
				<u-button size="large" :color="primary" shape="circle" :text="$t('classify.立即购买')" @click="debounce_Confirm"></u-button>
			</view>
			
			<view style="height: 20rpx;"></view>
			<view class="ios-btm"></view>
		</view>
	</view>
</template>

<script>
	import {
			Debounce
		} from '@/common/utils/lib/tools'
export default {
	props: {
		show: Boolean,
		primary: String,
		goodsNum: Number,
		goodsInfo: Object
	},
	data(){
		return {
			debounce_Confirm:Debounce(()=>this.confirm(),300),
			qty:0
		}
	},
	watch:{
		goodsNum:{
			handler(val){
				this.qty = val
			},
			immediate:true
		}
	},
	computed: {
		goodsImg() {
			return this.goodsInfo.coverUrl ? this.goodsInfo.coverUrl : ''
		}
	},
	methods: {
		sub() {
			if (this.goodsNum <= 1) return
			this.$root.goodsNum--
		},
		handleNumberChange(e){
			console.log(e)
			let num = Number(e.detail.value)
			if(num == NaN)return
			if(num=="")return
			if(num<=0)num=1
			this.$root.goodsNum = num
		},
		add() {
			this.$root.goodsNum++
			// if (!this.goodsInfo.maxNumber || this.goodsNum < this.goodsInfo.maxNumber) {
			// 	if (this.goodsNum < this.goodsInfo.stock) {
			// 		this.$root.goodsNum++
			// 	} else {
			// 		this.$toastApp(this.$t('classify.商品库存不足'))
			// 	}
			// } else {
			// 	this.$toastApp(this.$t('classify.数量超出范围'))
			// }
		},
		confirm() {
			// if (this.$root.goodsInfo.stock == 0) {
			// 	this.$toastApp(this.$t('classify.商品库存不足'))
			// 	return
			// }
			this.$emit('buy')
		}
	}
}
</script>

<style lang="scss" scoped>
.m-t-114 {
	margin-top: 114rpx !important;
}
.c-80 {
	color: #808080;
}
.popup-box {
	padding: 52rpx 32rpx 0 32rpx;
	border-radius: 32rpx 32rpx 0 0;
	.sku-goods {
		padding-bottom: 20rpx;
		.price {
			@include fontH(48, 58);
		}
		.stock {
			@include fontH(28, 40);
		}
	}

	scroll-view {
		max-height: 570rpx;
	}

	.sku-big-box {
		.sku-item-box {
			margin-top: 64rpx;
			.tlt {
				color: #424242;
				@include fontH(30, 42);
			}

			.item-box {
				// @include flex(start, center, wrap);

				.item {
					height: 56rpx;
					min-width: 120rpx;
					padding: 0 30rpx;
					// color: $color;
					font-size: 28rpx;
					line-height: 52rpx;
					margin-top: 20rpx;
					margin-right: 20rpx;
					text-align: center;
					background: #ededed;
					border-radius: 10rpx;
					border: 2rpx solid #ededed;

					input {
						height: 56rpx;
						width: 120rpx;
						border-radius: 8rpx;
						// color: $color;
						font-size: 28rpx;
						line-height: 56rpx;
					}
				}

				.item-act {
					color: var(--color-primary);
					background: var(--backgroundColor);
					border-color: var(--color-primary);
				}
			}
		}
	}

	.sum-box {
		margin-top: 50rpx;

		.tlt {
			color: #424242;
			@include fontH(30, 42);
		}

		.sum-item {
			font-size: 30rpx;
			.number {
				width: 84rpx;
				height: 44rpx;
				line-height: 44rpx;
				background: #f2f2f2;
				border-radius: 4px;
			}
		}
	}

	.close-btn {
		position: absolute;
		top: 40rpx;
		right: 32rpx;
	}

	button {
		// @include flex(center);
		width: 686rpx;
		height: 88rpx;
		color: #ffffff;
		font-weight: 600;
		margin-top: 30rpx;
		// background: $redColor;
		border-radius: 50rpx;
		@include fontH(32, 44);
	}
}
</style>
